<template>
  <el-dialog
    :title="this.RelevanceData.title"
    class="mini"
    :visible.sync="RelevanceData.deleteDialog"
  >
    <el-form label-width="80px">
      <el-form-item label="目标知识库">
        <div class="block">
          <el-cascader
            ref="form"
            v-model="value"
            :options="options"
            :props="{
              expandTrigger: 'hover',
              value: 'id',
              label: 'name',
              children: 'children'
            }"
            @change="handleChange"
          ></el-cascader>
        </div>
      </el-form-item>
      <el-form-item label="目标文件夹">
        <div class="tree">
          <el-tree
            ref="treeForm"
            :data="treeData"
            :props="treeProps"
            node-key="value"
            show-checkbox
            :check-strictly="true"
            @check-change="handleCheckChange"
          >
            <template slot-scope="scope">
              <span>
                <svg class="icon" aria-hidden="true">
                  <use
                    :xlink:href="iconType(scope.data.tag.fileExtension).class"
                  ></use>
                </svg>
                {{ scope.data.label }}
              </span>
            </template>
          </el-tree>
        </div>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="RelevanceData.deleteDialog = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listTeamTree } from '@/api/fd/repository.js'
import { saveRelation } from '@/api/fd/document.js'
import { listTreeFolder } from '@/api/fd/folder.js'
import { unity } from '@/styles/js/setIconType.js'
import permissionList from '@/utils/permissionList.js'

export default {
  props: ['RelevanceData'],
  data() {
    return {
      iconType: unity.setIconType,
      treeProps: {
        children: 'children',
        label: 'label',
        id: 'value'
      },
      options: [],
      value: '',
      treeData: [],
      checkedId: '',
      repositoryId: '',

    }
  },
  mounted() {

    listTeamTree({  permission: permissionList.VISIBLE + permissionList.ASSOCIATE }).then((res) => {
      this.options = res.data
    })
  },
  methods: {
    handleChange(row) {
      this.repositoryId = row[row.length - 1]
      listTreeFolder({ repositoryId: row[row.length - 1] }).then((res) => {
        this.getTreeItem(res.data.data)
      })
    },
    handleCheckChange(data, checkbox, node) {
      if (checkbox === true) {
        this.checkedId = data.value
        this.$refs.treeForm.setCheckedNodes([data])
      }
    },
    getTreeItem(data) {
      data.map((item) => {
        console.log(item)
        if (item.children) {
          this.getTreeItem(item.children)
          item.disabled = true
        } else {
          if (!item.children) {
            this.treeData = data // 结果赋值
          }
        }
      })
    },
    confirm() {
      let data = {
        myDocumentId: this.RelevanceData.row.documentId,
        toDocumentId: this.checkedId
      }
      saveRelation(data).then((res) => {

          this.$message.success('关联成功')
          this.RelevanceData.deleteDialog = false
        
      })
    }
  }
}
</script>

<style>
</style>